<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" size="small" >
        <el-form-item label="操作时间"><date-picker v-model="queryFrom.time_range"/></el-form-item>
        <el-form-item label="操作人" ><el-input v-model.trim="queryFrom.id" /></el-form-item>
        <el-form-item label="资源"><el-input v-model.trim="queryFrom.username" /></el-form-item>
        <el-form-item label="动作"><el-input v-model.trim="queryFrom.username" /></el-form-item>
        <el-form-item label="IP"><el-input v-model.trim="queryFrom.username" /></el-form-item>

        <el-button size="small" type="primary" @click="sendQuery">提交</el-button>
      </el-form>
      <analyse-table :table-data="tableData" :key_mapper="key_mapper" :sortable = "false" :min-width = "160" size="small" @sort-change="sortChange">
        <el-table-column label="操作" min-width="90" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="edit(scope.row)" >查看</el-button>
          </template>
        </el-table-column>
      </analyse-table>
      <el-pagination :current-page.sync="page" :page-size="size" :total.sync="total" class="mt-10" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange" @size-change="handleSizeChange"/>
      <el-dialog :visible.sync="dialogFormVisible" title="用户编辑">
        <el-form ref="ruleForm"    label-width="110px" class="demo-ruleForm">

          <el-row>
            <el-col :span="8">操作时间：{{ruleForm.id}}</el-col>
            <el-col :span="8">操作者：{{ruleForm.id}}</el-col>
            <el-col :span="8">资源类型：{{ruleForm.id}}</el-col>
            <el-col :span="8">资源名称：{{ruleForm.id}}</el-col>
            <el-col :span="8">资源ID：{{ruleForm.id}}</el-col>
            <el-col :span="8">动作：{{ruleForm.id}}</el-col>
            <el-col :span="8">ip：{{ruleForm.id}}</el-col>
            <el-col :span="8">设备：{{ruleForm.id}}</el-col>
            <el-col :span="8">内容：{{ruleForm.id}}</el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" size="small"@click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { merchantUser, updateUser} from '@/api/role'
  import { pickTime } from '@/model/DateRange'
  import mixins from '@/model/mixins'
  import {useVcode} from '@/utils/Vcode'

  export default {
    name: 'Help',
    mixins: [mixins],
    data() {
      return {
        dialogFormVisible: false,
        queryFrom: {
          time_range: pickTime
        },
        merchant: '',
        id: '',
        sendDate: {},
        options: [],
        key_mapper: [
          { key: 'id', name: '操作时间', width: 145 }, { key: 'username', name: '操作者', width: 145},
          { key: 'role_name', name: '资源类型', width: 120 },
          { key: 'desc', name: '资源名称', width: 145 }, { key: 'created_at', name: '资源ID', width: 145 },
          { key: 'desc', name: '动作', width: 145 },{ key: 'desc', name: 'ip', width: 145 },
          { key: 'desc', name: '设备', width: 145 }, { key: 'desc', name: '内容', width: 145 },
        ],
        ruleForm: {
        },
        API: merchantUser
      }
    },
    created() {
      Object.assign(this.queryFrom,{time_range:[``,``]})
    },
    activated () {
    },
    methods: {
      currentChange(val) {
        this.sendData.page = val
        this.getData(this.sendData)
      },
      edit(row) {
        this.id = row.id
        this.ruleForm = row
        this.ruleForm.role = this.ruleForm.role.replace(/,/g, '')
        // console.log(this.ruleForm.role)
        this.dialogFormVisible = true
      },
      addBusin() {
        this.id = ''
        this.ruleForm = {}
        this.dialogFormVisible = true
      },

      clear() {
        this.ruleForm = {}
      },
    }
  }
</script>
